import CodeView from '../../../shared/components/CodeView';
import DisplayColumn from '../../../shared/components/DisplayColumn';
import DisplayGrid from '../../../shared/components/DisplayGrid';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
import * as Base from './base/example';

<div className="doc lead">
  Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels.
</div>

<CodeView isViewport exampleOnly demoStyles={getDemoStylesById(Base.states, 'open')}>
  {getDisplayElementById(Base.states, 'open')}
</CodeView>

## About Docked Utility Bar

Fixed bar at the bottom of viewport, that contains items.

## Base
<CodeView isViewport demoStyles={getDemoStylesById(Base.states, 'default')}>
  {getDisplayElementById(Base.states, 'default')}
</CodeView>

## States

### Panel open
<CodeView isViewport demoStyles={getDemoStylesById(Base.states, 'open')}>
  {getDisplayElementById(Base.states, 'open')}
</CodeView>

### Item has notification
<CodeView isViewport demoStyles={getDemoStylesById(Base.states, 'notification')}>
  {getDisplayElementById(Base.states, 'notification')}
</CodeView>

### Item has popout

If the utility bar item is active and its panel is popped open in a new window, use `.slds-utility-bar__item_pop-out` on the `.slds-utility-bar__item`. This will add a visual indicator to communicate that the panel is opened in a new window.

<CodeView isViewport demoStyles={getDemoStylesById(Base.states, 'pop-out')}>
  {getDisplayElementById(Base.states, 'pop-out')}
</CodeView>
